<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div>
            <el-row :gutter="4">
              <el-form
                :inline="true"
                label-position="left"
                class="demo-form-inline"
                label-width="100px"
              >
                <el-form-item>
                  <el-input
                    class="mr5"
                    v-model="searchDto.keywords"
                    placeholder="请输入关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                  >查询
                  </el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clear"
                  >
                    重置
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    @click="newFile"
                  >
                    新增红头文件
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div>
            <page-table
              :page-data="RedHeadPageList"
              :loading="loading"
              :do-get-page-data="getRedHeadPageList"
            >
              <el-table-column
                type="index"
                width="100"
                align="center"
                label="序号"
              ></el-table-column>
              <el-table-column
                prop="name"
                align="center"
                show-overflow-tooltip
                label="文件名称"
              >
                <template slot-scope="scope">
                  <a class="article_title_a" @click="showThis(scope.row)">
                    {{ scope.row.name }}
                  </a>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                label="创建时间"
                prop="createTime"
              ></el-table-column>
              <el-table-column
                label="管理"
                width="200"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="editRed(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="deleteRed(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
          </div>
        </el-col>
      </el-card>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      @close="fail"
      title="新增/编辑红头文件:"
      width="40%"
      :visible.sync="redFileStatus"
    >
      <el-row>
        <el-col :span="24" class="mt20">
          <el-form
            ref="form"
            :rules="rules"
            :model="formInfo"
            label-width="90px"
          >
            <el-form-item label="名称:" prop="name">
              <el-input
                placeholder="请输入红头文件名称"
                v-model="formInfo.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="选择文件:" prop="files">
              <el-upload
                class="upload-demo"
                :action="imgHead"
                :headers="head"
                accept=".doc,.docx"
                :on-success="handleSuccess"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="save" type="primary">确定</el-button>
        <el-button @click="fail">取消</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
  name: "redFile",
  created() {
    this.getRedHeadPageList();
  },
  data() {
    return {
      loading: false,
      // 上传配置
      imgHead: window.api.uploadUrl1 + "?path=wps/redHeader",
      head: {
        userRole: "ADMIN",
        token: window.sessionStorage.getItem("token")
      },
      RedHeadPageList: { records: [] },
      redFileStatus: false,
      searchDto: {
        pageIndex: "",
        pageSize: 10,
        keywords: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入红头文件名称", trigger: "blur" }
        ],
        files: [{ required: true, message: "请上传文件", trigger: "blur" }]
      },
      fileList: [], //el-upload文件保存数组
      formInfo: {
        id: "",
        name: "",
        files: ""
      }
    };
  },
  methods: {
    //获取分页数据
    getRedHeadPageList(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getWpsRedHeadPageList(tem).then(ret => {
        this.RedHeadPageList = ret.data;
      });
    },
    //搜索
    search() {
      this.getRedHeadPageList();
    },
    //重置
    clear() {
      this.searchDto = {
        pageIndex: "",
        pageSize: 10,
        keywords: ""
      };
      this.getRedHeadPageList();
    },
    //新增弹窗
    newFile() {
      this.redFileStatus = true;
    },
    //新增/确定
    save() {
      let tem = { body: this.formInfo };
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.API.addOrUpdateWpsRedHead(tem).then(() => {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.redFileStatus = false;
            this.fileList = [];
            this.getRedHeadPageList(1);
          });
        } else {
          return false;
        }
      });
    },
    //关闭
    fail() {
      this.redFileStatus = false;
      this.formInfo = {
        id: "",
        name: "",
        files: ""
      };
      this.fileList = [];
    },
    //el-upload方法
    //上传成功
    handleSuccess(res, file, fileList) {
      this.formInfo.files = fileList[0].response.value;
    },
    handleRemove(file, fileList) {
      this.formInfo.files = "";
    },
    handlePreview(file) {
      this.openTabPage(
        window.api.preFile +
        "?url=" +
        window.api.image +
        "/" +
        file.response.value +
        "?token=" +
        window.sessionStorage.getItem("token")
      );
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //编辑
    editRed(row) {
      this.redFileStatus = true;
      this.API.getWpsRedHeadById({ id: row.id }).then(ret => {
        this.formInfo = ret.data;
        this.fileList.push({
          name: ret.data.files.split("/")[2],
          response: { value: ret.data.files }
        });
      });
    },
    //删除
    deleteRed(row) {
      this.$confirm("确认删除当前红头文件?", "提示", {}).then(() => {
        this.API.deleteWpsRedHeadById({ id: row.id }).then(ret => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getRedHeadPageList(1);
        });
      });
    },
    //下载
    showThis(row) {
      this.API.getWpsRedHeadById({ id: row.id }).then(ret => {
        window.location.href = window.api.image + "/" + ret.data.files;
      });
    }
  }
};
</script>
<style scoped>
  .input_content {
    float: left;
    width: 500px;
    height: auto;
    margin-right: 150px;
    box-sizing: border-box;
    font-size: 14px;
    /*color: #666666;*/
    text-align: left;
  }
</style>
